<template>
  <div class="main">
    <div class="outDiv">
      <headerBack>
        <b class="my-center" slot="my-center">{{headerTitle}}</b>
      </headerBack>
      <div>
        <span class="titleSp">
          <b>{{suggestTitle}}</b>
        </span>
        <div class="topics-box">
          <div class="topics flex-h">
            <div
              @click="chooseSubject(item,index)"
              :class="['topics-subject',subIndex===index?'active':'']"
              v-for="(item,index) in subjectList"
              :key="index"
            >{{item}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 

<script>
import RaterList from "~/components/raterList";
import headerBack from "~/components/headerBack";
import { saveSingle } from "~/api/volunteer";
import ls from "store2";
export default {
  components: {
    RaterList,
    headerBack
  },
  created() {
    this.types = this.$route.query.type * 1;
    switch (this.types) {
      case 5:
        this.headerTitle = "老师推荐科目";
        this.suggestTitle = "请在下方科目中选择您老师推荐的科目，仅选一门";
        break;
      case 6:
        this.headerTitle = "家长推荐科目";
        this.suggestTitle = "请在下方科目中选择您家长推荐的科目，仅选一门";
        break;
      case 7:
        this.headerTitle = "同学排除科目";
        this.suggestTitle =
          "请在下方科目中选择同学给您建议的排除科目，仅选一门";
        break;
      default:
        break;
    }
  },
  data() {
    return {
      headerTitle: "",
      suggestTitle: "",
      sendLists: ["地理", "历史", "政治", "物理", "化学", "生物"],
      types: 0,
      data9: 50,
      subjectList: ["政治", "历史", "地理", "化学", "生物", "物理", "技术"],
      subIndex: null,
      isSix: true, //六选三
      flagCount: 0
    };
  },
  mounted: function() {
    this.isSix = sessionStorage.getItem('chooseSubject')*1
    this.isSix ? (this.subjectList = ["政治", "历史", "地理", "化学", "生物", "物理"]) : (this.subjectList = ["政治","历史", "地理", "化学","生物", "物理", "技术"]);
  },

  methods: {
    chooseSubject(item, index) {
      let rate_1 = 0;
      let rate_2 = 0;
      let rate_3 = 0;
      let rate_4 = 0;
      let rate_5 = 0;
      let rate_6 = 0;
      let rate_7 = 0;
      this.subIndex = index;
      switch (index) {
        case 0:
          rate_1 = 1;
          break;
        case 1:
          rate_2 = 1;
          break;
        case 2:
          rate_3 = 1;
          break;
        case 3:
          rate_4 = 1;
          break;
        case 4:
          rate_5 = 1;
          break;
        case 5:
          rate_6 = 1;
          break;
        case 6:
          rate_7 = 1;
          break;
        default:
          break;
      }
      let params = {};
      if (this.isSix) {
        params = {
          rate1: rate_1,
          rate2: rate_2,
          rate3: rate_3,
          rate4: rate_4,
          rate5: rate_5,
          rate6: rate_6
        };
      } else {
        params = {
          rate1: rate_1,
          rate2: rate_2,
          rate3: rate_3,
          rate4: rate_4,
          rate5: rate_5,
          rate6: rate_6,
          rate7: rate_7
        };
      }

      this.saveSingle(JSON.stringify(params));
    },
    saveSingle(data) {
        this.flagCount += 1;
      let obj = {
        userType: ls.get("userType"),
        type: 1,
        classify: this.types,
        parameter: data
      };
        if (this.flagCount == 1) {
      saveSingle(obj)
        .then(res => {
          if (res.code === "0") {
            this.$vux.toast.text(res.message);
            setTimeout(() => {
              this.$router.back();  
            }, 20);
          }else{
            this.flagCount == 0
          }
        })
        .catch(error => {
            this.flagCount == 0
          this.$vux.toast.text(error);
        });
        }
    }
  }
};
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow: hidden;
}
.hh2 {
  font-size: 0.44rem;
  font-weight: bold;
  color: rgba(34, 34, 34, 1);
  line-height: 0.44rem;
  text-align: left;
  padding: 0 0.3rem;
  box-sizing: border-box;
}

.titleSp {
  display: block;
  margin: 0.5rem auto 0.3rem;
  width: 6.9rem;
  height: 0.8rem;
  background: rgba(255, 241, 184, 1);
  border-radius: 0.1rem;
  padding-left: 0.2rem;
  box-sizing: border-box;
  line-height: 0.8rem;

  b {
    font-size: 0.24rem;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
  }
}
.topics-box {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  box-sizing: border-box;
  .topics {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    .topics-subject {
      width: 3.3rem;
      margin-bottom: 0.3rem;
      height: 0.96rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.48rem;
      text-align: center;
      line-height: 0.96rem;
      font-size: 0.3rem;
      font-family: "PingFangSC-Semibold,PingFangSC";
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
    }
    .active {
      background: rgba(128, 213, 102, 0.2);
      color: rgba(128, 213, 102, 1);
    }
  }
}
.my-center {
  font-weight: 600;
}
</style>
